<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="dataCtx" width="1200" height="800"></canvas>

<script>
    var planData1=[
        {"pixX1": "66", "pixX2": "426", "pixY1": "110.24", "pixY2": "264.64","xz":0},
        {"pixX1": "328", "pixX2": "723", "pixY1": "130", "pixY2": "420.00","xz":0},
        {"pixX1": "198.94", "pixX2": "528.00", "pixY1": "310.64", "pixY2": "562.69","xz":0},
        {"pixX1": "758", "pixX2": "988", "pixY1": "110.21", "pixY2": "264.64","xz":0},
        {"pixX1": "990", "pixX2": "1090", "pixY1": "530", "pixY2": "630.00","xz":0},
    ];
    var canvas=document.getElementById("dataCtx");
    var ctx=canvas.getContext('2d');
    var overlapList = {}

    function draw() {
        var plan=planData1;

        ctx.clearRect(0,0,canvas.width,canvas.height);

        for(var i=0;i<plan.length;i++){
            ctx.strokeStyle="rgba(95,125,38,0.8)";  //上行线

            x1=+plan[i].pixX1
            x2=+plan[i].pixX2
            xw=x2-x1;
            y1=+plan[i].pixY1
            y2=+plan[i].pixY2
            yw=y2-y1;

            ctx.lineWidth=6;
            ctx.strokeRect(x1,y1,xw,yw);
        }
    }

    draw();

    ctx.fillStyle="red";
    function isOverlap (r1, r2) {
        var xMin = Math.min(+r1.pixX2, +r2.pixX2)
        var xMax = Math.max(+r1.pixX1, +r2.pixX1)
        var yMin = Math.min(+r1.pixY2, +r2.pixY2)
        var yMax = Math.max(+r1.pixY1, +r2.pixY1)

        var w = xMin - xMax
        var h = yMin - yMax

        var bool = xMax <= xMin && yMax <= yMin
        // console.log(xMax, yMax ,xMin ,  yMin, w, h)
        
        if (bool) {
            ctx.fillRect(xMax, yMax,w, h);
        }
        return bool
    }

    for(var i=0;i<planData1.length;i++){
        for(var j=i+1;j<planData1.length-1;j++){
            var bool = isOverlap(planData1[i], planData1[j])
            if (bool) {
                overlapList[i] = planData1[i]
                overlapList[j] = planData1[j]
            }
        }
    }

</script>
</body>
</html>

<script type="text/javascript">
    var r1 = { x: 10, y: 10, width: 90, height: 90}
    var r2 = { x: 60, y: 60, width: 90, height: 90}
    var r3 = { x: 30, y: 0, width: 50, height: 120}
    var r4 = { x: 160, y: 160, width: 20, height: 20}
    var r5 = { x: 60, y: 60, width: 20, height: 20}

    function f2 (rect1, rect2) {
      var r1 = rect1.x > rect2.x + rect2.width || rect1.y > rect2.y + rect2.height
      var r2 = rect2.x > rect1.x + rect1.width || rect2.y > rect1.y + rect1.height
      return !(r1 || r2);
    }

    // console.time('f2')
    // console.log(f2(r1,r2))
    // console.log(f2(r1,r3))
    // console.log(f2(r1,r4))
    // console.timeEnd('f2')

    function f3 (r1, r2) {
        var xMin = Math.min(r1.x + r1.width, r2.x+ r2.width)
        var xMax = Math.max(r1.x, r2.x)
        var yMin = Math.min(r1.y + r1.height, r2.y+ r2.height)
        var yMax = Math.max(r1.y, r2.y)

        var w = xMin - xMax
        var h = yMin - yMax
        // var x = 
        // var y = 
        console.log(xMax, yMax ,xMin ,  yMin, w, h)
        return xMax <= xMin && yMax <= yMin
    }

    console.time('f3')
    console.log(f3(r1,r2))
    console.log(f3(r1,r3))
    console.log(f3(r1,r4))
    console.log(f3(r1,r5))
    console.timeEnd('f3')

</script>